﻿<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>出库单管理</title>
    <script src="~/lib/vue/vue.global.min.js"></script>
    <script src="~/lib/element-plus/index.full.js"></script>
    <link href="~/lib/element-plus/index.min.css" rel="stylesheet" />
    <link href="~/lib/element-plus/index.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

    <style>
        /* 左侧菜单栏样式（新增） */
        #sidebar {
            width: 220px !important;
            min-width: 220px !important;
            max-width: 220px !important;
            flex-shrink: 0 !important;
            padding: 0;
            margin: 0;
        }

        /* 表格表头样式（新增） */
        .el-table__header th {
            background-color: #F5F5F5 !important;
            color: #191919 !important;
        }

        .container {
            width: 95%;
            height: 600px;
            margin: 20px auto;
            border: 1px solid #ebeef5;
            border-radius: 4px;
            padding: 20px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }

        .search-area {
            margin-bottom: 16px;
        }

        .btn-group {
            margin-bottom: 16px;
        }

        .custom-select,
        .el-input {
            width: 150px !important;
        }

        .el-table__fixed-column .cell {
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 搜索区域 -->
        <div class="search-area">
            <el-form inline>
                <el-form-item label="出库单号">
                    <el-input v-model="Form.outOrderNo" placeholder="请输入出库单号">
                    </el-input>
                </el-form-item>
                <el-form-item label="出库类型">
                    <el-select v-model="Form.outType" placeholder="请选择" class="custom-select">
                        <el-option label="请选择" value=""></el-option>
                        <el-option label="领用出库" value="领用出库"></el-option>
                        <el-option label="销售出库" value="销售出库"></el-option>
                        <el-option label="采购退货" value="采购退货"></el-option>
                        <el-option label="调拨出库" value="调拨出库"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="单据状态">
                    <el-select v-model="Form.orderStatus" placeholder="请选择" class="custom-select">
                        <el-option label="请选择" value=""></el-option>
                        <el-option label="草稿" value="草稿"></el-option>
                        <el-option label="已完成" value="已完成"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="仓库名称">
                    <el-select v-model="Form.warehouseName" placeholder="请选择" class="custom-select">
                        <el-option label="请选择" value=""></el-option>
                        <el-option label="货品仓库一" value="货品仓库一"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="loadData">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button v-on:click="resetSearch">重置</el-button>
                </el-form-item>
              
            </el-form>
        </div>

        <!-- 功能按钮区域 -->
        <div class="btn-group">
            <el-button type="primary" v-on:click="goToAddPage">新增</el-button>
            <el-button v-on:click="handleDelete">删除</el-button>
            <el-button>复制</el-button>
            <el-button >审核</el-button>
            <el-button>撤销</el-button>
            <el-button>关闭</el-button>
            <el-button>开启</el-button>
            <el-button>导出</el-button>
            <el-button>刷新</el-button>
        </div>

        <!-- 数据表格区域 -->
        <el-table :data="tableData" border style="width: 100%" ref="outOrderTable">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="out_order_no" label="出库单号" fixed="left" width="150">
                <template #default="scope">
                    <span style="color: #409EFF; cursor: pointer;" v-on:click="gotoDetail(scope.row.out_order_no)">
                        {{ scope.row.out_order_no }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="out_type" label="出库类型" fixed="left" width="100"></el-table-column>
            <el-table-column prop="status" label="状态" fixed="left" width="100">
                <template #default="scope">
                    {{ formatStatus(scope.row.status) }}
                </template>
            </el-table-column>
            <el-table-column prop="out_date" label="出库日期" width="120">
                <template #default="scope">
                    {{ formatDate(scope.row.out_date) }}
                </template>
            </el-table-column>
            <el-table-column prop="warehouse_name" label="仓库名称" width="120"></el-table-column>
            <el-table-column prop="related_order_no" label="关联单号" width="120"></el-table-column>
            <el-table-column prop="customer_name" label="客户名称" width="120"></el-table-column>
            <el-table-column prop="contact_person" label="联系人" width="100"></el-table-column>
            <el-table-column prop="contact_phone" label="联系方式" width="120"></el-table-column>
            <el-table-column prop="out_goods" label="出库货品" width="150"></el-table-column>
            <el-table-column prop="out_quantity" label="出库数量" width="100"></el-table-column>
            <el-table-column prop="out_quantity" label="出库金额" width="100"></el-table-column>
            <el-table-column prop="out_quantity" label="经办人" width="100"></el-table-column>
            <el-table-column prop="creator" label="制单人" width="120"></el-table-column>
            <el-table-column prop="out_quantity" label="所在部门" width="100"></el-table-column>
            <el-table-column prop="create_time" label="制单时间" width="180">
                <template #default="scope">
                    {{ formatDateTime(scope.row.create_time) }}
                </template>
            </el-table-column>
            <el-table-column prop="auditor" label="审核人" width="120"></el-table-column>
            <el-table-column prop="audit_time" label="审核时间" width="120"></el-table-column>
            <el-table-column label="操作" fixed="right" width="150">
                <template #default="scope">
                    <el-button-group>
                        <el-button type="text" v-on:click="goToEdit(scope.row.out_order_no)">编辑</el-button>
                        <el-button type="text" style="color: red; margin-left: 10px;" v-on:click="handleSingleDelete(scope.row.out_order_no, scope.row)">删除</el-button>
                    </el-button-group>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <el-pagination v-on:size-change="handleSizeChange"
                       v-on:current-change="handleCurrentChange"
                       :current-page="pageIndex"
                       :page-sizes="[10, 20, 30, 40]"
                       :page-size="pageSize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="totalCount"
                       style="margin-top: 16px;">
        </el-pagination>

    </div>

    <script>
        const { createApp, onMounted, reactive, ref } = Vue;
        const app = createApp({
            setup() {
               const tableData = ref([]);
            const totalCount = ref(0);
            const pageIndex = ref(1);
            const pageSize = ref(10);

            const Form = reactive({
                outOrderNo: '',
                outType: '',
                orderStatus: '',
                warehouseName: '',
            });


                const handleSizeChange = (newSize) => {
                    pageSize.value = newSize;
                    loadData();
                };

                const handleCurrentChange = (newPage) => {
                    pageIndex.value = newPage;
                    loadData();
                };

               // 重置查询条件
            const resetSearch = () => {
                Form.outOrderNo = '';
                Form.outType = '';
                Form.orderStatus = '';
                Form.warehouseName = '';
                pageIndex.value = 1;
                loadData();
            };

            // 加载数据（仅架构，无实际请求）
            const loadData = async () => {
                // 实际项目中替换为真实接口请求
                tableData.value = [];
                totalCount.value = 0;
            };

        // 日期格式化（仅架构）
        const formatDate = (dateStr) => {
          if (!dateStr) return '';
          return dateStr; // 实际需转日期格式
        };

        const formatDateTime = (dateStr) => {
          if (!dateStr) return '';
          return dateStr; // 实际需转日期时间格式
        };

        // 状态格式化
        const formatStatus = (status) => {
          const statusMap = {
            '草稿': '草稿',
            '已完成': '已完成'
          };
          return statusMap[status] || '未知状态';
        };

                onMounted(() => {
                   loadData();
                });

              

                const gotoDetail = (outOrderNo) => {
                    // 跳转到详情页面逻辑
                    console.log('跳转出库单详情页面，单号：', outOrderNo);
                };

                const goToEdit = (outOrderNo) => {
                    // 跳转到编辑页面逻辑
                    console.log('跳转出库单编辑页面，单号：', outOrderNo);
                };

                            // 单条逻辑删除（仅架构）
        const handleSingleDelete = (outOrderNo, row) => {
            ElementPlus.ElMessageBox.confirm(
                '此操作将逻辑删除该出库单，是否继续？',
                '提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }
            ).then(async () => {
                try {
                    if (outOrderTable.value) {
                        outOrderTable.value.toggleRowSelection(row, false);
                    }
                    ElementPlus.ElMessage.success('删除成功（仅架构）');
                    loadData();
                } catch (err) {
                    ElementPlus.ElMessage.error('删除失败（仅架构）');
                }
            }).catch(() => {
                ElementPlus.ElMessage.info('已取消删除');
            });
        };

                // 表格ref
                const outOrderTable = ref(null);

                      // 批量逻辑删除（仅架构）
        const handleDelete = () => {
            if (!outOrderTable.value) {
                ElementPlus.ElMessage.warning('表格未加载完成，请稍后再试');
                return;
            }

            const selectedRows = outOrderTable.value.getSelectionRows();

            if (selectedRows.length === 0) {
                ElementPlus.ElMessage.warning('请勾选需要删除的单据！');
                return;
            }

            const outOrderNos = selectedRows.map(row => row.out_order_no);
            ElementPlus.ElMessageBox.confirm(
                '此操作将逻辑删除选中的出库单，是否继续？',
                '提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }
            ).then(async () => {
                try {
                    ElementPlus.ElMessage.success('批量删除成功（仅架构）');
                    loadData();
                } catch (err) {
                    ElementPlus.ElMessage.error('批量删除失败（仅架构）');
                }
            }).catch(() => {
                ElementPlus.ElMessage.info('已取消删除');
            });
        };

                const goToAddPage = () => {
            // 跳转到新增出库单的Add页面，此处根据实际路由调整路径
            window.location.href = '/OutboundManagement/Add';
        };

                return {
                    tableData,
                    totalCount,
                    pageIndex,
                    pageSize,
                    loadData,
                    handleSizeChange,
                    handleCurrentChange,
                    resetSearch,
                    goToAddPage,
                    Form,
                    gotoDetail,
                    goToEdit,
                    handleSingleDelete,
                    handleDelete,
                    formatDate,
                    formatDateTime,
                    formatStatus,
                    outOrderTable,
                    
                };
            }
        });
        app.use(ElementPlus);
        app.mount('.container');
    </script>
</body>

</html>